import React from 'react';
import PageTitle from 'component/page-title/PageTitle.jsx';
import Pagination from 'util/Pagination.jsx';
import UserService from 'service/UserService.jsx';
const userService = new UserService();
import MUtil from 'util/MUtil.jsx';
const mUtil = new MUtil();
import TableList from 'util/TableList.jsx';

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      pageNum: 1,
    }
  }
  componentDidMount() {
    this.loadUserList();
  }
  /**
   * 当页数发生变化的时候
   * @param {页数} pageNum 
   */
  onPageNumChange(pageNum) {
    this.setState({ pageNum }, () => {
      this.loadUserList();
    });
  }

  loadUserList() {
    userService
      .getUserList(this.state.pageNum)
      .then(res => {
        this.setState(res.data);
      }, errMsg => {
        this.setState({
          list: []
        });
        mUtil.errorTips(errMsg);
      });
  }
  render() {

    return (
      <div id="page-wrapper">
        <PageTitle title="用户列表" />
        <TableList tableHeads={['ID', '用户名', '邮箱', '电话', '注册时间']}>
          {
            this.state.list.map((user, index) => {
              return (
                <tr key={index}>
                  <td>{user.id}</td>
                  <td>{user.username}</td>
                  <td>{user.email}</td>
                  <td>{user.phone}</td>
                  <td>{new Date(user.createTime).toLocaleString()}</td>
                </tr>
              );
            })
          }
        </TableList>
        <Pagination current={this.state.pageNum}
          total={this.state.total}
          onChange={pageNum => this.onPageNumChange(pageNum)} />
      </div>
    );
  }
}

export default UserList;